import  {Table, Button,Tooltip,Input,Modal,message,Pagination} from 'antd';
import * as Icon from '@ant-design/icons';
import * as React from 'react';
const {M,MIO}=window;
class MiApi extends React.Component {
    constructor(props) {
        super(props);
        this.columns = [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
                width: '4%',
                render: text => <a href="#"> { text } </a>
            },
            {
                title: 'parent_id',
                dataIndex: 'parent_id',
                key: 'parent_id',
                width: '3%',
                render: text => <a href="#"> { text } </a>
            },
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
                width: '10%',
            },
            {
                title: 'apiPath',
                dataIndex: 'request_path',
                key: 'request_path',
                width: '30%',
            },
            {
                title: 'method',
                dataIndex: 'request_method',
                key: 'request_method',
                width: '4%',
            }
            //,
            // {
            //     title: '方法名',
            //     dataIndex: 'methed_name',
            //     key: 'methed_name',
            //     width: '1%',
            // },
            // {
            //     title: '描述',
            //     dataIndex: 'description',
            //     key: 'description',
            //     width: '2%',
            // }
            // ,
            // {
            //     title: '状态',
            //     dataIndex: 'status',
            //     key: 'status',
            //     width: '2%',
            //     render: (text, record) => {
            //             let f;
            //             text == "0" ? f = false : f = true;
            //             return <Switch defaultChecked={f}
            //                            onChange={this.onRecordChange.bind(this, text, record)} 
            //                     />;
                    
            //     }
            // }
        ];
        this.columns.push({
            title: '操作',
            key: 'operation',
            width: '20%',
            align: "left",
            render: (text, record) => {
                return <div style={{ textAlign: "left" }}>
                    <Tooltip title="编辑">
                        <Icon type="edit" onClick={this.showUpdateModal.bind(this,record)}/>
                    </Tooltip>
                    &nbsp;
                    <Tooltip title="删除">
                        <Icon type="delete" onClick={this.delete.bind(this,{id:record.id,parent_id:record.parent_id})}/>
                    </Tooltip>
                    &nbsp;
                    <Tooltip title="request_body_json">
                        <Icon type="right" onClick={this.showUpdateRequestExmpleModal.bind(this,record,"request_body_json")}/>
                    </Tooltip>
                    &nbsp;
                    <Tooltip title="mock_md">
                        <Icon type="file-markdown" onClick={this.showUpdateRequestExmpleModal.bind(this,record,"mock_md")}/>
                    </Tooltip>
                    &nbsp;
                    <Tooltip title="mock_js">
                        <Icon type="code" onClick={this.showUpdateRequestExmpleModal.bind(this,record,"mock_js")}/>
                    </Tooltip>
                    &nbsp;
                    <Tooltip title="mock_json">
                        <Icon type="left" onClick={this.showUpdateRequestExmpleModal.bind(this,record,"mock_json")}/>
                    </Tooltip>
                </div>;
            }
        });

        M.MiApi_this=this;

        this.m_props= {};
        this.state={
            record:{},
            Alldate:[],
            total: 0,
            name:'',
            status:'2',
            startPage:1,
            limit:10,
            visible: false,
            visibleRequestJson: false,
            visibleShowControllerTestForm: false,
            visibleShowTemplateValueForm: false,
            visibleShowAxiosRequestForm: false,
            visibleShowExmpleRequestForm: false,
            controllerTest_fileContent:"",
            templateValue_fileContent:"",
            host:"",
            modelType:"add",
            parent_id:props.parent_id,
            codeType:"mock"
        };

    }
    componentDidMount() {
        let current=1;
        let pageSize=10;
        // this.m_props.Alldatas(
        //     {
        //         startPage: current,
        //         limit: pageSize,
        //         name:this.state.name,
        //         status:this.state.status,
        //         parent_id:this.state.parent_id
        //     }
        // );
    };
    componentWillMount () {
       // store.subscribe(()=>{this.setState(store.getState())});
    }
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return
     }}
     flush(parent_id){
        // if(this.state.parent_id!=parent_id){
        //     this.state.parent_id=parent_id;
        //     this.state.startPage=1;
        // }
        // M.MiApi_this.m_props.Alldatas({
        //     startPage: this.state.startPage,
        //     limit: this.state.limit,
        //     name:this.state.name,
        //     status:this.state.status,
        //     parent_id:parent_id
        // });
    }
    deleteAll(parent_id){
       Modal.confirm({
            title: '确认删除',
            content: '删除不可恢复',
            onOk() {
                // MIO.miApiDeleteAll({parent_id}).then(d=>{
                //     M.MiApi_this.m_props.Alldatas({
                //         startPage:  M.MiApi_this.state.startPage,
                //         limit:  M.MiApi_this.state.limit,
                //         name: M.MiApi_this.state.name,
                //         status: M.MiApi_this.state.status,
                //         parent_id: M.MiApi_this.state.parent_id
                //     });
                //     M.MiApi_this.props.parentFlush();
                // })
            },
            onCancel() {},
          });
    }
    addOrUpdate = () => {
        const { form } = this.formRef.props;
        form.validateFields((err, values) => {
                if (err) {
                    message.error("ng")
                    return;
                }else{
                    let values=form.getFieldsValue()
                    this.state.visible=false;
                    if(this.state.modelType=="add"){
                        // MIO.miApiAdd(values).then(d=>{
                        //     M.MiApi_this.m_props.Alldatas(this.state);
                        //     message.success("ok")
                        //     this.props.parentFlush();
                        // })
                    }else{
                        // MIO.miApiUpdate(values).then(d=>{
                        //     M.MiApi_this.m_props.Alldatas(this.state);
                        //     message.success("ok")
                        //     this.props.parentFlush();
                        // })
                    }
                }
        });
     
   };
    delete(r){
        let r1 =window.confirm("确认删除"+JSON.stringify(r)+"?");
        if(r1){
            // MIO.miApiDelete(r).then(d=>{
            //     M.MiApi_this.m_props.Alldatas(this.state);
            //     message.success("ok")
            //     this.props.parentFlush();
            // })
        }
    }
    onTableChange(current, pageSize) {
        const state = M.MiApi_this.state;
        //console.log(state)
        state.startPage=current;
        state.limit=pageSize;
       // M.MiApi_this.m_props.Alldatas(this.state);
    }
    onRecordChange(text, record, checked){
        let f;
        true == checked ? f = 1 : f = 0;
      //  MIO.miApiSetStatus({id:record.id,status:f})
      //  M.MiApi_this.m_props.Alldatas(this.state);
    }
     showAddModal = (record) => {
        this.setState({
          visible: true,
          modelType:"add",
          record:{}
        });
      };
      showUpdateModal = (record) => {  
        if(!record){
            record=M.getAttribute("mi_api");   
        }
        const { form } = this.formRef.props;   
        form.resetFields();
        this.setState({
          visible: true,
          modelType:"update",
          record:record
        });
      };


      showTemplateValueForm=()=>{
        let parent_id=this.state.parent_id
        if(!parent_id || parent_id==-1){
            alert("先选择controller")
        }else{
    
        //    MIO.getTemplateValueByParentId({parent_id}).then(d=>{
        //        this.setState({
        //            templateValue_fileContent:JSON.stringify(d.data,null,2),
        //            visibleShowTemplateValueForm: true,
        //            record:M.getAttribute("mi_api")
        //        });
        //    })
        }

      };


      
      showUpdateRequestExmpleModal = (record,codeType) => {
      
         

     };

      
    

      miApiUpdateRequestJson=(record)=>{
             
      }

      miApiUpdateExmple=(id,text)=>{
          let record={};
          record.id=id;
          record.field_value=text;
          record.field_name=this.state.codeType;
         MIO.miApiUpdateExmple(record).then(d=>{
            this.setState({
                visibleShowExmpleRequestForm:false
            });
            message.success("ok")
        })
      }



      handleCancel = e => {
        const { form } = this.formRef.props;
        form.resetFields();
        this.setState({
          visible: false,
        });
      };
      searchData=e=>{
         M.MiApi_this.state.name=e.target.value;
         M.MiApi_this.m_props.Alldatas( M.MiApi_this.state);
      }

    render() {
        return (
            <div>          
                <Input
                    type="text"
                    placeholder="name"
                    onChange={this.searchData}
                    style={{ width: '30%', marginRight: '3%' }}
                />
                <Button disabled type="primary" onClick={this.deleteAll.bind(this,this.state.parent_id)}>删除所有</Button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Button type="primary" onClick={this.showAddModal}>添加api</Button>  
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Button type="primary" onClick={()=>this.showUpdateModal(null)}>编辑</Button>  
                <br/>
                <Table dataSource={this.state.Alldate} columns={this.columns} pagination={false} />
                <br/><br/><br/>
                <Pagination
                    showSizeChanger 
                    showQuickJumper
                    defaultCurrent={1}
                    total={this.state.total}
                    onChange={this.onTableChange.bind(this)}
                    onShowSizeChange={this.onTableChange.bind(this)}
                    pageSizeOptions={["5","10","20","50","100"]}
                />
           
 
               
            </div>
        )
    }
}

export default MiApi;








